<!DOCTYPE html>
<html>
<head>
<title>{{ .title }}</title>
<meta charset="UTF-8">
<meta name="keywords" content="M3U8,M3U8播放器,M3U8直播源,M3U8在线播放器"/>
<meta name="description" content="M3U8,M3U8播放器,M3U8直播源,M3U8在线播放器"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/hls.js/0.8.5/hls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-sm" href="/">Api接口测试</a>
        </div>
</nav>



<div class="container" style="padding-top:60px;">

	<div class="col-md-14 column">
		<form method="get">
		
		<center class="input-group" style="width: 100%;">
			<div id="stats"></div>
		</center>
		
         <br />
        <!-- 
        https://dbx3.tyswmp.com/20190501/3BQr6x23/900kb/hls/index.m3u8
		https://dbx3.tyswmp.com/20190501/3BQr6x23/index.m3u8 
		-->
		<div class="input-group" style="width: 100%;">
			<span  class="input-group-addon input-lg" style="width: 80px;">播放地址</span>
			<input class="form-control input-lg" type="search" value="https://dbx3.tyswmp.com/20190501/3BQr6x23/900kb/hls/index.m3u8" placeholder="输入播放地址[.m3u8]" id="url">
		</div>
		
        <br />

		<div>
			<button type="button" class="btn btn-success btn-lg btn-block" onclick="try_player_begin()">
                调用接口并尝试立即播放
            </button>
		</div>

		</form>
	</div>

	<br>
	<div class="col-md-14 column">
		<div class="panel panel-default">
			<div id="m3u8_video" class="panel-body"></div>
		</div>
	</div>

	
	
</div>

<script type="text/javascript">

function getQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}

function player(video_url){
	var dp = new DPlayer({
    container: document.getElementById('m3u8_video'),
    autoplay: true,
	    video: {
	        url: video_url,
	        type: 'hls'
	    },
	    hlsjsConfig: {
	        debug: true,
	        p2pConfig: {
	            logLevel: true,
	            live: false,
	        }
	    }
	});
	// dp.switchVideo({url: video_url});
    dp.play();
}

function try_player_begin(url){
    var url = $("#url").val();
    $.getJSON('/download', {url:url}, function(data){
    	console.log(data);
    	if (data.status == 0){
    		player(data.path);
    	}
    });
}


$(window).ready(function(){    
    var url = getQueryString('url');
    if (url) {
        $('#url').val(url);
        try_player_begin(url);
    }
});
</script>

</body>
</html>